<template>
	<div class="dashboard-container">
		<el-card style="height: 120px; margin-bottom: 20px">
			<!-- 给el-form绑定form -->
			<el-form label-width="80px" :model="form" :inline="true">
				<el-form-item label="类型">
					<el-select v-model="form.state" placeholder="类型">
						<el-option v-for="a in reqCategory2" :key="a.id" :label="a.name" :value="a.id"></el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="开始日期">
					<el-date-picker v-model="form.paytime" type="date" placeholder="开始日期筛选" size="default" />
				</el-form-item>
				<el-form-item label="结束日期">
					<el-date-picker v-model="form.endtime" type="date" placeholder="结束日期筛选" size="default" />
				</el-form-item>
				<el-form-item label="提现状态">
					<el-select v-model="form.status" placeholder="请选择提现状态">
						<el-option v-for="(val,i) in statusList" :key="i" :label="val.label"
							:value="val.value"></el-option>
					</el-select>
				</el-form-item>
				<el-button type="primary" icon="el-icon-search" @click="searchclick"
					style="margin-left: 12px">筛选</el-button>
				<el-button @click="resetSearch">重置</el-button>
				<el-button @click="daochu" type="success">导出excel</el-button>
			</el-form>
			<div>
				<el-row :gutter="18">
					<el-col :span="3">
						<div>总数量：<span>{{ tableData1.totalCount }}</span></div>
					</el-col>
					<el-col :span="3">
						<div>提现到余额：<span>{{ tableData1.txyue }}</span></div>
					</el-col>
					<el-col :span="3">
						<div>提现到推广金额：<span>{{ tableData1.txtgzh }}</span></div>
					</el-col>
				</el-row>
			</div>
		</el-card>
		<el-table :data="tableData" border>
			<el-table-column prop="id" label="ID" align="center" width="150">
			</el-table-column>
			<!-- <el-table-column prop="name" label="名称" align="center">
      </el-table-column> -->
			<el-table-column prop="nickname" label="用户名称" align="center">
			</el-table-column>
			<el-table-column prop="phone" label="手机号" align="center">
			</el-table-column>
			<el-table-column prop="title" label="备注" align="center">
			</el-table-column>
			<el-table-column prop="yuanprice" label="提现前余额" align="center">
			</el-table-column>

			<el-table-column prop="price" label="提现金额" align="center">
			</el-table-column>
			<el-table-column prop="sxf" label="手续费" align="center">
			</el-table-column>
			<el-table-column prop="dzprice" label="实际到账" align="center">
			</el-table-column>
			<el-table-column prop="addtime" label="时间" align="center">
				<template slot-scope="scope">
					{{ scope.row.addtime | datefilter }}
				</template>
			</el-table-column>
			<el-table-column label="银行卡信息" align="center">
				<template slot-scope="{ row }">
					{{ row.state === 3 ? row.Bank.name + ',' + row.Bank.yinhang + ',' + row.Bank.kaihuhang + ',' + row.Bank.bank + ',' + row.Bank.phone : '无' }}
				</template>
			</el-table-column>
			<el-table-column prop="status" label="提现状态" align="center">
				<template slot-scope="{ row }">
					<el-button v-if="row.status===1" type="primary" @click="cashOut(row)">
						提现中
					</el-button>
					<el-button v-else-if="row.status===2" type="success" disabled>
						提现成功
					</el-button>
				</template>
			</el-table-column>
			<!--      <el-table-column prop="状态" label="状态" align="center">-->
			<!--        <template slot-scope="{ row }">-->
			<!--          <el-tag :type="row.state == 1 ? 'primary' : 'success'">{{-->
			<!--              row.state | statefilter-->
			<!--            }}</el-tag>-->
			<!--        </template>-->
			<!--      </el-table-column>-->

		</el-table>
		<Pagination2 :currentPage="this.form.pageNo" :size="this.form.pageSize" :total="total"
			@changelimit="changelimit" @changecurrentPage="changecurrentPage"></Pagination2>
		<add ref="add" @refresh="refresh"></add>
	</div>
</template>

<script>
	import {
		delcopywritingdel,
		tixianlistRecommend,
		cushPackage
	} from '@/api/servetypeIndex'
	import add from "./modules/add";
	// import { getviporderlist } from '@/api/dingdan'
	export default {
		name: "Dashboard",
		components: {
			add,
		},
		data() {
			return {
				that: this,
				tableData1: {
					totalCount: 0,
					txtgzh: 0,
					txyue: 0,
				},
				reqCategory2: [{
						id: 0,
						name: "全部"
					},
					{
						id: 1,
						name: "提现到余额"
					},
					{
						id: 2,
						name: "提现到推广账户"
					},
				],
				statusList: [{
						value: 1,
						label: '提现中'
					},
					{
						value: 2,
						label: '提现成功'
					},
					{
						value: 0,
						label: '全部'
					},
				],
				form: {
					state: 0,
					pageNo: 1,
					paytime: "",
					endtime: "",
					pageSize: 15,
					status: 0
				},
				reqCategoryLoaded: false, // 新增标志
				total: 0,
				tableData: [],
			};
		},
		// beforeCreate() {
		//   that = this;
		// },
		filters: {
			statefilter(val) {
				if (val == 1) {
					return "未推送";
				} else {
					return "已推送";
				}
			},
			datefilter(val) {
				if (val) {
					var date = new Date(parseInt(val) * 1000);
					var Year = date.getFullYear();
					var Moth =
						date.getMonth() + 1 < 10 ?
						"0" + (date.getMonth() + 1) :
						date.getMonth() + 1;
					var Day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
					var Hour =
						date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
					var Minute =
						date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
					var Sechond =
						date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
					var GMT =
						Year +
						"-" +
						Moth +
						"-" +
						Day +
						"   " +
						Hour +
						":" +
						Minute +
						":" +
						Sechond;

					return GMT;
				} else {
					return "";
				}
			},
		},
		methods: {
			cashOut(row) {
				console.log('row', row)
				this.$confirm('确实要提现吗？', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					cushPackage({
						id: row.id,
					}).then(res => {
						if (res.code === 0) {
							this.$message({
								message: "提现成功",
								type: "success",
							});
							this.getcouponlist1()
						} else {
							this.$message({
								message: "提现失败",
								type: "error",
							});
						}
					})
				}).catch(() => {

				});







				// try {
				//   const data = await cushPackage({ id: row.id })
				//   console.log(data)
				//   if (data.code === 0) {
				//     this.$message({ message: "提现成功", type: "success", });
				//     this.getcouponlist1()
				//   } else {
				//     this.$message({ message: "提现失败", type: "error", });
				//   }
				// } catch (e) {
				//   console.log(e)
				// }
			},
			searchclick() {
				this.getcouponlist1();
			},
			async daochu() {
				let param = {
					state: this.form.state,
					// paytime: this.form.paytime,
					// endtime: this.form.endtime,
					adminid: Number(localStorage.getItem('userId')),
					paytime: this.form.paytime == "" ?
						"" : Math.floor(new Date(this.form.paytime).getTime() / 1000),
					endtime: this.form.endtime == "" ?
						"" : Math.floor(new Date(this.form.endtime).getTime() / 1000),

				};
				// this.$router.push({ path: "https://api.suishilian.com/admin/exceldc", query: param });
				// const externalLinkWithParams = `http://127.0.0.1:8082/admin/excelshtk?phone=${param.phone}&nickname=${param.nickname}&status=${param.status}`;
				const externalLinkWithParams =
					`http://zdb.suishilian.com/admin/exceltixian?state=${param.state}&paytime=${param.paytime}&endtime=${param.endtime}`;

				window.location.href = externalLinkWithParams;
			},
			resetSearch() {
				this.form.state = 0;
				this.form.paytime = "";
				this.form.endtime = "";
				this.form.status = 0;
				this.getcouponlist1();
			},
			addrenyuan() {
				this.$refs.add.add();
			},
			// 子传父:自定义事件
			refresh() {
				this.getcouponlist1();
			},
			async getcouponlist1() {
				// let result = await tixianlistRecommend(this.form);
				let param = {
					paytime: this.form.paytime == "" ?
						"" : Math.floor(new Date(this.form.paytime).getTime() / 1000),
					endtime: this.form.endtime == "" ?
						"" : Math.floor(new Date(this.form.endtime).getTime() / 1000),
				};
				let result = await tixianlistRecommend({
					status: this.form.status,
					state: this.form.state,
					...param,
					pageNo: this.form.pageNo,
					pageSize: this.form.pageSize,
					adminid: Number(localStorage.getItem('userId')),

				});
				console.log(result);
				if (result.code == 0) {
					if (result.data.data != []) {
						this.tableData = result.data.data;
						this.total = result.data.totalCount;
						this.tableData1.totalCount = result.data.totalCount
						this.tableData1.txtgzh = result.data.txtgzh
						this.tableData1.txyue = result.data.txyue
						this.tableData.forEach((item, index) => {
							// if (item.iamges != "") {
							//   this.$set(item, "images", item.images.split(","));
							// }
						});
						console.log("最后", this.tableData);
					}
				}
			},
			changelimit(val) {
				this.form.pageSize = val;
				this.getcouponlist1();
			},
			changecurrentPage(val) {
				this.form.pageNo = val;
				this.getcouponlist1();
			},
			changerenyuan(val) {
				this.$refs.add.edit(val);
			},
			async deldel(val) {
				let result = await delcopywritingdel({
					id: val.id,
					adminid: Number(localStorage.getItem('userId'))
				});
				if (result.code == 0) {
					this.$message({
						showClose: true,
						message: "推送成功",
						type: "success",
					});
					this.getcouponlist1();
				}
			},
		},
		watch: {
			"form.name": {
				handler(newVal) {
					if (newVal == "") {
						this.getcouponlist1();
					}
				},
			},
		},
		mounted() {
			this.getcouponlist1();
			// this.gettypelist();
		},
	};
</script>

<style lang="scss" scoped>
	// .dashboard {
	//   &-container {
	//     margin: 30px;
	//   }
	//   &-text {
	//     font-size: 30px;
	//     line-height: 46px;
	//   }
	// }
</style>